<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>考试详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link href="../../../css/mui.min.css" rel="stylesheet" />
    <link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-slider-group{
        height:calc(100vh - 125px);
      }
      .mui-control-content {
        background-color: white;
        min-height:calc(100vh - 125px);
        /* min-height: 100vh; */
      }
      .border-bottom{
        border-bottom:1px solid #F2F2F2;
      }
      .mui-input-group:before,.mui-input-group:after{
        height: 0px;
      }
      .mui-input-group .mui-input-row:after{
        height: 0px;
      }
      .mui-checkbox input[type=checkbox]:before, .mui-radio input[type=radio]:before{
        font-size: 24px;
      }
      .mui-checkbox input[type=checkbox], .mui-radio input[type=radio]{
        top: 5px;
      }
      .mui-radio input[type=radio]:checked:before {content: '\e442';}
      /* 单选框错误的时候 */
      .mui-radio input[type=radio].wrong:checked:before {content: '\e434';color: #FF0000 !important;opacity: 1;}
      .mui-checkbox input[type=checkbox]:before {
        content: '\e413';
      }		
      .mui-checkbox input[type=checkbox]:checked:before {
        content: '\e443';
      }
      .mui-checkbox input[type=checkbox].wrong:checked:before {
        color: #FF0000 !important;
        content: '\e443';
        opacity: 1;
        
      }
      .mui-checkbox input[type=checkbox].wrong:checked:after {
        content: '';
        width: 22px;
        height: 22px;
        display: inline-block;
        background:url(../img/wrong.png) no-repeat center;
        background-size: 90%;
        position: absolute;
        left: 0;
        
      }	
      .mui-checkbox input[type=checkbox]:before{
        font-size: 22px;
      }
      .mui-checkbox input[type=checkbox]{
        top: 6px;
      }
       .button button{
         width: 100%;
         text-align: center;
         line-height: 1.6rem;
       } 
        .button button.prev{
          color: #275EB1;
          border:1px solid #275EB1;
        } 
        .button button.next{
          color: #ffff !important;
          border:1px solid #275EB1;
          background-color: #275EB1;
        }  
       .container{
         height: 100vh;
       }
       .answerCard {
       	position: fixed;
       	bottom: 6.4rem;
       	right: 1.5rem;
        z-index: 99;
       }
       
       .answerCard img {
       	width: 4.5rem;
       	height: 4.5rem;
       }
       .examPopUp{
         width: 100%;
         left: 0;
         bottom: 0;
         right: 0;
         height:calc(100vh - 200px);
         background-color: #fff;
         border-radius: 7px 7px 0 0;
       }
       .not {
       	width: 15px;
       	height: 15px;
       	background: #EAFFEC;
       	border: 1px solid #22AC38;
       	color: #22AC38;
       	vertical-align: middle;
       }
       .already {
       	width: 15px;
       	height: 15px;
       	background: #FCE3E5;
       	border: 1px solid #BD0303;
       	color: #BD0303;
       }
       .cardContent{
         height:calc(100vh - 200px - 116px);
         position: relative;
       }
       .grid {
       	display: flex;
       	flex-wrap: wrap;
       }
       .grid.col-8>div {
       	margin: 10px 0;
       	/* padding-bottom: calc((100% - 60upx)/7); */
       	/* height: 0; */
       	width: calc(100%/8);
       	text-align: center;
       	line-height: auto;
       }
       
       .not-lg {
       	width: 30px;
       	height: 30px;
       	line-height: 30px;
       	border: 1px solid #bfbfbf;
       	vertical-align: middle;
       }
       
       .already-lg {
       	width: 30px;
       	height: 30px;
       	line-height: 30px;
       	color: #1782E5;
       	background: rgba(19, 173, 243, .1);
       	border: 1px solid rgba(0, 160, 233);
       	vertical-align: middle;
       }
       .cu-bar {
       	display: flex;
       	position: relative;
       	align-items: center;
       	min-height: 3rem;
       	justify-content: space-between;
       }
       .cu-bar div {
       	height: 3rem;
       	line-height: 3rem;
        text-align: center;
       }
       .solid-top{
         border-top: 1px solid #DCDCDC;
       }
       .answerError {
         width: 30px;
         height: 30px;
         line-height: 30px;
       	background: #FCE3E5;
       	border: 1px solid #BD0303;
       	color: #BD0303;
       }
       
       .answerCorrect {
         width: 30px;
         height: 30px;
         line-height: 30px;
       	background: #EAFFEC;
       	border: 1px solid #22AC38;
       	color: #22AC38;
       }
       .mui-radio input[type='radio'][disabled]:before, .mui-checkbox input[type='checkbox'][disabled]:before
       {
           opacity: 1;
       }
	   * { touch-action: pan-y; }
    </style>
  </head>
  <body>
    <div class="container bg-white" id="container" v-cloak>
      <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">考试详情</h1>
      </header>
      <div id="" class="mui-content bg-white">
        <div class="answerCard" @click="showCard()">
          <img src="../img/answerCard.png">
        </div>
        <div id="slider" class="mui-slider">
          <div class="mui-slider-group">
            <!-- <form class="mui-input-group">
              <div class="mui-input-row mui-radio mui-left">
                <label>11111</label>
                <input type="radio" disabled checked class="wrong">
              </div>
            </form> -->
            <div class="mui-slider-item mui-control-content" v-for="(item,index) in examList" :key="index">
              <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                  <div class="text-blue padding text-df border-bottom">
                    <span v-if="item.type==1">单选题</span>
                    <span v-if="item.type==2">多选题</span>
                    <span v-if="item.type==3">判断题</span>
                  </div>
                  <div class="examContent padding">
                    <div class="text-black title flex align-start">
                      <div class="text-orange padding-right-xs">第{{index+1}}/{{examList.length}}题</div>
                      <div class="flex-sub" style="width: 356px;" v-html="item.subject"></div>
                    </div>
                    <div class="padding-top">
                      <form class="mui-input-group" v-if="item.type==1">
                        <div class="mui-input-row mui-radio mui-left" v-for="opt in item.userQuestionOptList">
                          <label v-html="opt.optDesc"></label>
                          <input :name="opt.optIndex" type="radio" :value="opt.optIndex" v-model="item.userOpt"
                            disabled :class="!opt.optRight&&item.userOpt.indexOf(opt.optIndex) > -1?'wrong':''">
                        </div>
                      </form>
                      <form class="mui-input-group" v-if="item.type==2">
                        <div class="mui-input-row mui-checkbox mui-left" v-for="opt in item.userQuestionOptList">
                          <label v-html="opt.optDesc"></label>
                          <input :name="opt.optIndex" type="checkbox" :value="opt.optIndex" v-model="item.userOpt"
                            disabled :class="!opt.optRight&&item.userOptMy.indexOf(opt.optIndex) > -1?'wrong':''">
                        </div>
                      </form>
                      <form class="mui-input-group" v-if="item.type==3">
                        <div class="mui-input-row mui-radio mui-left">
                          <label>正确</label>
                          <input name="a" type="radio" value="T" v-model="item.userOpt" disabled :class="item.userOpt=='T'&&item.rightOpt=='F'?'wrong':''">
                        </div>
                        <div class="mui-input-row mui-radio mui-left">
                          <label>错误</label>
                          <input name="a" type="radio" value="F" v-model="item.userOpt" disabled :class="item.userOpt=='F'&&item.rightOpt=='T'?'wrong':''">
                        </div>
                      </form>
                    </div>
                    <div class="padding-top">
                      <div v-if="item.type==3">
                        <div><span>你的答案：</span><span class="text-red">{{item.userOpt=='T'?'正确':item.userOpt=='F'?'错误':''}}</span><span
                            class="padding-left-lg">正确答案：</span><span class="text-green">{{item.rightOpt=='T'?'正确':item.rightOpt=='F'?'错误':''}}</span></div>
                      </div>
                      <div v-else>
                        <div><span>你的答案：</span><span class="text-red">{{item.userOptMy}}</span><span class="padding-left-lg">正确答案：</span><span
                            class="text-green">{{item.rightOpt}}</span></div>
                      </div>
                    </div>
                  </div>

                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="button flex padding-lr">
          <div class="flex-sub padding-right">
            <button class="prev" @click="prev()">上一题</button>
          </div>
          <div class="flex-sub">
            <button class="next" @click="next()" style="color: #fff;">下一题</button>
          </div>
        </div>
      </div>
      <div class="examPopUp mui-popover mui-popover-add" id="popUp">
        <div class="flex bg-white justify-end align-center border-bottom">
          <div class="flex-sub text-center text-df padding-tb">答题卡</div>
          <div class="action" @click="hideCard">
            <span class="mui-icon mui-icon-closeempty text-grey" style="font-size: 34px;"></span>
          </div>
        </div>
        <div class="flex justify-between text-sm padding-lr margin-top-sm">
          <div class="text-grey">
            <span>共：{{examList,'total'|count}}</span>
            <span class="margin-left">正确：{{examList,'correct'|count}}</span>
            <span class="margin-left">错误：{{examList,'error'|count}}</span>
          </div>
          <div class="flex align-center">
            <div class="not margin-lr-sm"></div>
            <div class="">正确</div>
            <div class="already margin-lr-sm"></div> 错误
          </div>


        </div>
        <div class="cardContent margin">
          <div class="mui-scroll-wrapper">
            <div class="mui-scroll">
              <!--这里放置真实显示的DOM内容-->
              <div class="grid col-8">
                <div v-for="(item,index) in examList">
                  <div :class="item.userOptMy==item.rightOpt?'answerCorrect':'answerError'" @click="AppointedSubject(index)">{{index+1}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="cu-bar bg-white text-df solid-top"> -->
        <!-- <div class="flex-sub text-red" @click="hideCard">进入答题</div> -->
        <!-- <div class="flex-sub bg-blue text-white" @click="submit">交卷</div> -->
        <!-- </div> -->
      </div>
    </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/jquery-3.2.1.min.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript" src="../../../js/vue.js"></script>
    <script src="../formal/js/api.js"></script>
    <script type="text/javascript">
      var exam = null;
      var htapi = new HTGlobal();
      var user = JSON.parse(localStorage.getItem('outUser')); //当前用户信息
      var cv = null,
        id = null;
		
		
	var slider = undefined
      mui.plusReady(function() {
        cv = plus.webview.currentWebview();
        console.log(cv.form);
        id = cv.pageId ? cv.pageId : '';
        opener = cv.opener()
        console.log(opener.id)
        if(opener.id == './examResult.html'){//如果是从结果页进来的，则关闭上一个页面
          opener.close('none');
        }
        plus.nativeUI.showWaiting('加载中');
        exam.getData(id)
		
		
		
      })
      exam = new Vue({
        el: '#container',
        data: {
          timer: null,
          d: '00',
          h: '00',
          i: '00',
          s: '00',
          examIndex: 0, //跳转索引
          answerIndex: 0, //题目索引
          examList: [], //试题列表
          seconds: 0, //倒计时
          letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N'],
          detail: {}, //整体试题详情
          Tips: '确定提交试卷吗？',
		  htapi:{
			 findOptIndexLetter(index){
				 return index
			 } 
		  }
        },
        created: function() {

        },
        beforeDestroy() {
          clearInterval(this.timer)
        },
        filters: {
          count(val, type) {
            var i = 0; //错误
            for (var j = 0; j < val.length; j++) {
              if (val[j].userOptMy === val[j].rightOpt) {
                i += 1
              }
            }
            if (type == 'correct') {
              return i;
            } else if (type == 'error') {
              return val.length - i;
            } else {
              return val.length
            }
          }
        },
        onShow() {
          console.log('页面显示')
        },
        methods: {

          //考试详情
          getData(id) {
            var that = this;
            htapi.fetch({
              userPaperId: id,
              userId: user.id,
            }, function(data) {
              console.log('考试详情' + JSON.stringify(data))
              if (data.code == '0') {
                data.data.userQuestionList.forEach(function(item) {
                  item.userOptMy = item.userOpt; //为页面上做判断使用
                  if (item.type == 2) {
                    if (item.userOpt) {
                      item.userOpt = item.userOpt.split("、")
                    } else {
                      item.userOpt = []
                    }
                  }
                  item.userQuestionOptList.forEach(function(opt) {
                    var index = Number(opt.optIndex) - 1
                    opt.optIndex = that.letters[index]
					if(/^(\s?<.+?>)/ig.test(opt.optDesc)){
						opt.optDesc = opt.optDesc.replace(/^(\s?<.+?>)/ig,"$1"+opt.optIndex+": ")
					}else{
						opt.optDesc = opt.optIndex+": "+opt.optDesc
					}
                    opt.optDesc = opt.optDesc.replace(/\<img/gi,
                      '<img style="max-width: 60%;margin:15upx 0;"');
					opt.optDesc = opt.optDesc.replace(/src=['"]([^'"]+)['"]/ig,"src='($1)?userId="+user.id+"'")
                  });
				  item.subject = item.subject.replace(/\<img/gi,
				    '<img style="max-width:100%;"');
				  item.subject = item.subject.replace(/src=['"]([^'"]+)['"]/ig,"src='($1)?userId="+user.id+"'")
                })
                that.detail = data.data;
                that.examList = data.data.userQuestionList;
                that.$nextTick(function() { //dom渲染完初始化
                  slider = mui(".mui-slider").slider({deceleration:0.5});
                });
              }
              // console.log(JSON.stringify(data))
            }, '加载中', 'examAnswer')
          },
          // 显示答题卡
          showCard() {
            mui('#popUp').popover('show')
          },
          // 隐藏答题卡
          hideCard() {
            mui('#popUp').popover('hide')
          },
          prev() { //上一题
            if (this.examIndex == 0) {
              mui.toast("这已经是第一题了")
              return
            }
            if (this.examIndex != 0) {
              this.examIndex -= 1;
            }
            //var slider = mui('.mui-slider').slider({deceleration:0.5}); //跳转到相对应的滑块
            slider.gotoItem(this.examIndex);
          },
          next() { //下一题
            if (this.examIndex == this.examList.length - 1) {
              mui.toast("这已经是最后一题了")
              return
            }
            this.examIndex += 1;
            console.log(this.examIndex)
            //var slider = mui('.mui-slider').slider({deceleration:0.5}); //跳转到相对应的滑块
            slider.gotoItem(this.examIndex);
          },
          AppointedSubject(index) { //题卡指定
            this.examIndex = index;
            this.hideCard()
            //var slider = mui('.mui-slider').slider({deceleration:0.5}); //跳转到相对应的滑块
            slider.gotoItem(this.examIndex);
          },
        }
      })
      mui.init({
        swipeBack: false
      });
      mui('.mui-scroll-wrapper').scroll({
        indicators: false, //是否显示滚动条
        scrollY: true, //是否竖向滚动
      });
      /**
       * 监听滑动事件
       */
      document.getElementById('slider').addEventListener('slide', function(e) {
        console.log(e)
        console.log(e.detail.slideNumber)
        exam.examIndex = e.detail.slideNumber
      },{ passive: false })
	  document.getElementById('slider').addEventListener('touchend',function(e){
		  console.log(JSON.stringify(slider))
		  if(!slider.moved)
		  slider.gotoItem(exam.examIndex);
	  })
    </script>
  </body>
</html>
